import React, { PureComponent } from 'react';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { message } from 'antd';
import Arrow from '../../../common/Arrow';
import Button from '../../../common/Button';
import _5t from '../../../../asserts/5t.png';
import _5t_vip from '../../../../asserts/5t_vip.png';
import fast_download from '../../../../asserts/fast_download.png';
import fast_download_vip from '../../../../asserts/fast_download_vip.png';
import video_fast from '../../../../asserts/video_fast.png';
import video_fast_vip from '../../../../asserts/video_fast_vip.png';
import more from '../../../../asserts/more.png';
import more_vip from '../../../../asserts/more_vip.png';
import enterprise from '../../../../asserts/enterprise.png';
import { logout, openVip } from '../../../../api';
import { COMMON_SUCCESS_STATE, LOGIN_PATH, PAT_RETURN_URL, STORE_KEY } from '../../../../constant';
import { removeUser } from '../../../../redux/actions/user';
import { removeStore } from '../../../../utils/storageUtils';
import 'antd/lib/message/style';
import './index.less';
import { orderCode } from '../../../../utils/commonUtils';

class UserTool extends PureComponent {
  static propTypes = {
    visible: PropTypes.bool.isRequired,
    removeUser: PropTypes.func,
    history: PropTypes.object,
    user: PropTypes.object
  };

  static defaultProps = {
    visible: false,
  };

  logout = async (event) => {
    event.preventDefault();
    const {
      removeUser,
      history
    } = this.props;
    const {
      code,
      msg
    } = await logout();
    if (code === COMMON_SUCCESS_STATE) {
      // 移出redux中数据
      removeUser();
      // 删除localstorage
      removeStore(STORE_KEY);
      // 返回登录页面
      history.replace(LOGIN_PATH);
    } else {
      message.error(msg);
    }
  };

  // 开通会员
  openVip = async () => {
    let object = {
      subject: '开通超级会员',
      outTradeNo: orderCode(),
      totalMount: '69.00',
      returnUrl: PAT_RETURN_URL
    };
    let {
      code,
      msg,
      data
    } = await openVip(object);
    if (code === COMMON_SUCCESS_STATE) {
      document.write(data);
    } else {
      message.error(msg);
    }
  };

  // 初始化会员信息
  initVipInfo = () => {
    const { user } = this.props;
    let object = {
      vipTro: '',
      vipButton: '',
      vipMessage: '',
      days: ''
    };
    if (user.vipState === 0) {
      // 不是超级会员
      object.vipTro = '你还不是超级会员';
      object.vipButton = '开通超级会员';
      object.vipMessage = '解锁超级会员39项特权';
    } else {
      // 为超级会员
      let timeout = new Date(user.vipTimeout).getTime();
      let now = new Date().getTime();
      if (now < timeout) {
        // 未过期
        object.vipTro = '尊敬的超级会员';
        object.vipButton = '续费超级会员';
        object.vipMessage = '拥有超级会员39项特权';
      } else {
        // 获取过期时间
        let subTime = now - timeout;
        // 过期多少天
        object.days = Math.ceil(subTime / (1000 * 60 * 60 * 24));
        object.vipTro = `已失去特权${object.days}天`;
        object.vipButton = '续费超级会员';
        object.vipMessage = '重拾超级会员39项特权';
      }
    }
    return object;
  };

  render () {
    const {
      visible,
      user
    } = this.props;

    let vipInfo = this.initVipInfo();


    return (
      <>
        <div style={{ display: visible ? 'block' : 'none' }}
          className={'tool_modal ' +
          (vipInfo.days ? 'timeout ' : '') +
          ((user.vipState === 2 && !vipInfo.days)? 'vip': '')}>
          <Arrow class="tool_arrow"/>
          <p className="tool_modal_username">
            {
              user.username
            }
            <i/>
          </p>
          <div className="tool_modal_vip_info">
            {
              vipInfo.vipTro
            }
            <Button onClick={this.openVip} style={{
              backgroundImage: 'linear-gradient(137deg, #f5deb7, #e9b966)',
              fontWeight: 700,
              color: '#64360d',
            }}
            >
              {
                vipInfo.vipButton
              }
            </Button>
          </div>
          <p className="tool_modal_return">
            <i/>
            {
              vipInfo.vipMessage
            }
            <i/>
          </p>
          <ul className="tool_modal_item">
            <li>
              <a href="/#">
                <img src={vipInfo.days ? _5t : _5t_vip} alt=""/>
                <p>5T空间</p>
              </a>
            </li>
            <li>
              <a href="/#">
                <img src={vipInfo.days ? fast_download : fast_download_vip} alt=""/>
                <p>极速下载</p>
              </a>
            </li>
            <li>
              <a href="/#">
                <img src={vipInfo.days ? video_fast : video_fast_vip} alt=""/>
                <p>视频倍数</p>
              </a>
            </li>
            <li>
              <a href="/#">
                <img src={vipInfo.days ? more : more_vip} alt=""/>
                <p>查看更多</p>
              </a>
            </li>
          </ul>
          <a href="/#" className="tool_modal_enterprise">
            <img src={enterprise} alt=""/>
            <div className="enterprise_center">
              <p>企业权益</p>
              <p>极速下载，保存文件数据提升等</p>
            </div>
            <i className="iconfont icon-caret-right"/>
          </a>
          <ul className="tool_modal_footer">
            <li>
              <a href="/#">
                个人主页
              </a>
            </li>
            <li>
              <a href="/#">
                帮助中心
              </a>
            </li>
            <li>
              <a href="/#" onClick={this.logout}>
                退出登录
              </a>
            </li>
          </ul>
        </div>
      </>
    );
  }
}

export default connect(
  (state) => (
    {
      user: state.user
    }
  ),
  {
    removeUser
  }
)(withRouter(UserTool));


